<!-- *************
 *@description:地图组件
 *@author:rennan
 *@date: 2023-07-16 10:56:05
 *@version: V1.0.0
 ************ -->
<!-- <template>
  <div id="container" style="height: 100%;"></div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from 'vue';
import { ref } from "vue";// const map = shallowRef(null);
const path = ref([]);
const current_position = ref([]);
function initMap() {
  window._AMapSecurityConfig = { securityJsCode: 'c8fe79b2f67429595480358d6f379c3f', }  //安全密钥
  AMapLoader.load({
    key: "36bd9c665a1f9da7c0ae89b6a68f4ab3", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    const map = new AMap.Map("container", { //设置地图容器id
      viewMode: "3D",    //是否为3D地图模式
      zoom: 13,           //初始化地图级别
      center: [120.9877386, 31.3933284], //初始化地图中心点位置

      var :marker = new AMap.Marker({
        position: [120.9877386, 31.3933284],
        map:map
      }),
      // var :Marker= new AMap.Marker({
      // position: [120.9877386, 31.3933284],  // 设置标记点的坐标
      // map: map  // 关联地图对象
    // }),

    });
  }).catch(e => { console.log(e); })
  
}
initMap()
</script>

<style lang='scss' scoped></style> -->
<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

onMounted(async () => {
  window._AMapSecurityConfig = { securityJsCode: 'c8fe79b2f67429595480358d6f379c3f' }; // 安全密钥
  try {
    const AMap = await AMapLoader.load({
      key: '36bd9c665a1f9da7c0ae89b6a68f4ab3', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的插件列表，如比例尺 'AMap.Scale' 等
    });
    const map = new AMap.Map('container', {
      viewMode: '3D', // 是否为3D地图模式
      zoom: 13, // 初始化地图级别
      center: [120.9877386, 31.3933284], // 初始化地图中心点位置
    });
    const marker = new AMap.Marker({
      position: [120.9877386, 31.3933284],
      map: map,
    });
    const marker1 = new AMap.Marker({
      position: [ 116.3913447,39.9053937],
      map:map,

    });
    const marker2 = new AMap.Marker({
      position:[103.7447791,36.0632191],
      map:map,
    })
  } catch (error) {
    console.error(error);
  }
});
</script>

<style scoped>
#container {
  height: 100%;
}
</style>
